<!doctype html>
<head>
    <title>Threebox Basic Example</title>
    <script src="../dist/threebox.js" type="text/javascript"></script>
    <script src="config.js"></script>

    <script src='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.js'></script>
    <link href='https://api.mapbox.com/mapbox-gl-js/v0.53.0/mapbox-gl.css' rel='stylesheet' />
    <style>
        body, html { 
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #map { 
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id='map' class='map'></div>

    <script>
    if(!config) console.error("Config not set! Make a copy of 'config_template.js', add in your access token, and save the file as 'config.js'.");
    
    mapboxgl.accessToken = config.accessToken;
    var origin = [-122.4340, 37.7353, 15000];

    var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/light-v9',
      center: origin,
      zoom: 8,
      pitch: 60,
      bearing: 80
    });


map.on('style.load', function() {

    map.addLayer({
        id: 'custom_layer',
        type: 'custom',
        onAdd: function(map, mbxContext){

            tb = new Threebox(
                map, 
                mbxContext,
                {defaultLights: true}
            );

            // initialize geometry and material of our cube object
            var geometry = new THREE.BoxGeometry(200, 200, 200);

            var redMaterial = new THREE.MeshPhongMaterial( {
                color: 0x009900, 
                side: THREE.DoubleSide
            });

            var cube = new THREE.Mesh(geometry, redMaterial);

            cube = tb.Object3D({obj: cube})
                .setCoords(origin)

            tb.add(cube)
        },
        
        render: function(gl, matrix){
            tb.update();
        }
    });
});


    </script>
</body>